<template>
  <div class="wrap">
    <div class="header">
      <div class="left">
        <el-select v-model="queryParams.transferType" placeholder="请选择" class="mgr10" @change="changeOption">
          <el-option value="" label="全部运输方式"></el-option>
          <el-option
            v-for="item in showTransferTypeList"
            :key="item.transferType"
            :label="item.typeName"
            :value="item.transferType">
          </el-option>
        </el-select>

        <el-input v-model="queryParams.keyword" style="width: 200px" placeholder="订舱号/货柜编号/货件单号"></el-input>
        <el-button type="primary" @click="changeOption">搜索</el-button>

      </div>
      <div class="right">

      </div>
    </div>
    <div class="content">
      <el-tabs v-model="queryParams.status" @tab-click="changeOption" v-permission="['admin', ROLE_FIRST_LEG()]">
        <el-tab-pane :label="`待装柜(${statusNumber.waitMakeCabinetNum})`" name="wait_make_cabinet"></el-tab-pane>
        <el-tab-pane :label="`待报关(${statusNumber.waitCustomsDeclarationNum})`" name="wait_customs_declaration"></el-tab-pane>
        <el-tab-pane :label="`待装货(${statusNumber.waitShipmentNum})`" name="wait_shipment"></el-tab-pane>
        <el-tab-pane :label="`待清关(${statusNumber.waitCustomsClearanceNum})`" name="wait_customs_clearance"></el-tab-pane>
        <el-tab-pane :label="`待海外接收(${statusNumber.waitReceiveNum})`" name="wait_receive"></el-tab-pane>
        <el-tab-pane :label="`已完成(${statusNumber.firstFinishNum})`" name="firstFinish"></el-tab-pane>
        <el-tab-pane :label="`全部(${statusNumber.totalNum})`" name="total"></el-tab-pane>
      </el-tabs>
      <el-tabs v-model="queryParams.status" @tab-click="changeOption" v-permission="['admin', ROLE_ONE_SHIPPING(), ROLE_INBOUND_SORTING()]">
        <el-tab-pane :label="`运输中(${statusNumber.inTransitNum})`" name="inTransit"></el-tab-pane>
        <el-tab-pane :label="`待海外接收(${statusNumber.waitReceiveNum})`" name="wait_receive"></el-tab-pane>
        <el-tab-pane :label="`待分拣(${statusNumber.waitSortingNum})`" name="wait_sorting"></el-tab-pane>
        <el-tab-pane :label="`已分拣(${statusNumber.finishedSortingNum})`" name="finished_sorting"></el-tab-pane>
        <el-tab-pane :label="`全部(${statusNumber.totalNum})`" name="total"></el-tab-pane>
      </el-tabs>
      <el-table
        border
        :data="tableData"
        :key="queryParams.tabType"
        v-loading="loading"
      >
        <el-table-column
          label="货柜名称"
          prop="containerName"
          align="center"
          min-width="150"
          show-overflow-tooltip
          fixed
        >
        </el-table-column>
        <el-table-column
          label="订舱号"
          prop="bookingNum"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            {{row.bookingNum || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          label="航班编号"
          prop="flightNo"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            {{row.flightNo || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          label="提单编号"
          prop="ladingNo"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            {{row.ladingNo || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          label="货件单数量"
          prop="shipmentNum"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          label="箱子数量"
          prop="boxNum"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          label="总重量（kg）"
          prop="weight"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          label="总方数"
          prop="squareNumber"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          label="总计费重"
          prop="calWeight"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          label="运输类型"
          prop="transferType"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{getTransferName(row.transferType)}}
          </template>
        </el-table-column>
        <el-table-column
          label="制单时间"
          prop="createTime"
          align="center"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          label="货柜状态"
          prop="status"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{getContainerStatusStr(row.status)}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="left"
          min-width="300"
          fixed="right"
        >
          <template v-slot="{row}">
            <div class="mgb10">
              <el-button type="view" @click="jumpInfo(row)" class="mgr10">查看</el-button>
              <export-container-template :data="row" style="display: inline-block" class="mgr10"></export-container-template>
              <edit-container-btn :row="row" class="mgr10" @changeRow="getData"></edit-container-btn>
              <del-container-btn :data="row" @delRow="getData"></del-container-btn>
            </div>
            <div>
              <change-container-status-btn :data="row" @changeRow="getData"></change-container-status-btn>
            </div>
          </template>
        </el-table-column>

      </el-table>
      <div class="page-wrap">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="getData"
          :page-sizes="[10, 20, 50, 100,]"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import {getContainerList} from "@/api/container";
import shippingPlanDataMixin from "@/views/shippingPlan/mixin/shippingPlanDataMixin";
import DelContainerBtn from "@/views/container/components/DelContainerBtn.vue";
import ChangeContainerStatusBtn from "@/views/container/components/ChangeContainerStatusBtn.vue";
import {ROLE_FIRST_LEG, ROLE_INBOUND_SORTING, ROLE_ONE_SHIPPING} from "@/utils/admin";
import {getContainerStatusStr} from "@/utils/container";
import ExportContainerTemplate from "@/views/container/components/ExportContainerTemplate.vue";
import EditContainerBtn from "@/views/container/components/EditContainerBtn.vue";


export default {
  name: 'airContainerList',
  components: {EditContainerBtn, ExportContainerTemplate, ChangeContainerStatusBtn, DelContainerBtn},
  mixins: [shippingPlanDataMixin],
  computed: {
    showTransferTypeList(){
      return this.transferTypeList.filter(item=> item.type === this.queryParams.type)
    }
  },
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        keyword: '',
        transferType: '',
        status: 'total',
        type: 'air',
      },
      tableData: [],
      total: 0,
      loading: false,
      statusNumber: {
        waitMakeCabinetNum: 0,
        waitCustomsDeclarationNum: 0,
        waitShipmentNum: 0,
        waitCustomsClearanceNum: 0,
        waitReceiveNum: 0,
        waitSortingNum: 0,
        finishedSortingNum: 0,
        finishedShelvesNum: 0,
        totalNum: 0, // 总数
        inTransitNum: 0, // 运输中
        firstFinishNum: 0, // 已完成 （头程）
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getContainerStatusStr,
    ROLE_INBOUND_SORTING() {
      return ROLE_INBOUND_SORTING
    },
    ROLE_FIRST_LEG() {
      return ROLE_FIRST_LEG
    },
    ROLE_ONE_SHIPPING() {
      return ROLE_ONE_SHIPPING
    },
    getData(){
      this.loading = true
      getContainerList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.tableData = res.data
          this.total = res.info.total
          this.statusNumber = res.info.statusNumber
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    handleSizeChange(val) {
      this.queryParams.PageSize = val;
      this.queryParams.page = 1
      this.getData();
    },
    getTransferName(transferType){
      const item = this.transferTypeList.find(item=> item.transferType === transferType)
      return item ? item.typeName : ''
    },
    jumpInfo(row){
      this.$router.push({
        name: 'containerInfo',
        query: {
          id: row.id
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.wrap{
  padding: 30px 30px;
  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 0 0 0;
    margin-top: 20px;
  }
}
</style>
